<template>
    <div class="item">
        <div class="item-left">
            <img class="left_img" :src="sender.imgurl" alt="">
        </div>
        <div class="item-right">
            <div class="right-name">
                {{sender.name}}
            </div>
            <div class="right-desc">
                <div class="desc-content">
                    {{item.content}}
                </div>
                
                <div class="desc-fujian">
                    <p class="fujian-title">
                        <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.36rem;height:.36rem;vertical-align: -0.05rem">
                            <use xlink:href="#icon-fujian"></use>
                        </svg>
                        附件内容
                    </p>
                    <div class="fujian-img">
                        <flexbox wrap="wrap" justify="flex-start" :gutter="0">
                            <flexbox-item v-for="(imgItem,index) of item.fujian" :key="index" :span="1/4" ><div class="fujian-img_item" :style="{backgroundImage:'url('+imgItem.msrc+')'}" @click="handleImgClick(itemIndex,index)"></div></flexbox-item>
                            <!-- <flexbox-item><img class="fujian-img_item" src="http://thirdwx.qlogo.cn/mmopen/qztxpSicM8xQaZYtiaJqsWhRwAWUribnTwVwVDUr0Pw5gb6OKpxl6l32YrDibcTiavjhPpQHY6pF7xh3fpYK3BLXOYOhvFIOiatUrv/0" alt=""></flexbox-item>
                            <flexbox-item><img class="fujian-img_item" src="http://thirdwx.qlogo.cn/mmopen/qztxpSicM8xQaZYtiaJqsWhRwAWUribnTwVwVDUr0Pw5gb6OKpxl6l32YrDibcTiavjhPpQHY6pF7xh3fpYK3BLXOYOhvFIOiatUrv/0" alt=""></flexbox-item>
                            <flexbox-item><img class="fujian-img_item" src="http://thirdwx.qlogo.cn/mmopen/qztxpSicM8xQaZYtiaJqsWhRwAWUribnTwVwVDUr0Pw5gb6OKpxl6l32YrDibcTiavjhPpQHY6pF7xh3fpYK3BLXOYOhvFIOiatUrv/0" alt=""></flexbox-item> -->
                        </flexbox>
                    </div>
                </div>
            </div>
            <div class="right-time">
                {{item.time}}
            </div>
        </div>
    </div>
</template>

<script>
import { Flexbox, FlexboxItem } from 'vux'
export default {
    name: 'LetterDetailItem',

    components: {
        Flexbox,
        FlexboxItem
    },
    props: {
        sender: Object,
        item: Object,
        itemIndex: Number
    },
    methods: {
        handleImgClick (itemId,index) {
            this.$emit('imgClick',itemId,index)
        }
    }
}
</script>

<style lang="stylus" scoped>
.item
    background-color: #ffffff
    display: flex
    border-bottom: 1px solid #dddddd
    margin-bottom: .2rem
    box-shadow: 0 0 2px 1px #f0f0f0
    .item-left
        width: 1.8rem
        padding-top: .2rem
        text-align: center
        .left_img
            width: 1rem
            height: 1rem
            border-radius: 50%
    .item-right
        flex: 1
        padding: .25rem .2rem .2rem 0
        box-sizing: border-box
        position: relative
        .right-name
            font-size: .5rem
            margin-bottom: .2rem
        .right-desc
            line-height: .4rem
            color: #999999
            .desc-content
                margin-bottom: .2rem
            .desc-fujian
                .fujian-title
                    margin-bottom: .1rem
                .fujian-img
                    .fujian-img_item
                        width: 1.3rem
                        height: 1.3rem
                        background-repeat: no-repeat
                        background-position:center
                        background-size: cover
        .right-time
            position: absolute 
            top: .25rem
            right: .2rem
            font-size: .3rem
            color: #999999

</style>

